<template>
  <div>
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="发薪记录">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <!-- <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :md="6" :sm="8">
                  <a-form-item label="姓名">
                    <a-input placeholder="请输入用户姓名" v-model="queryParam.realname"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md="6" :sm="8">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div> -->
          <!-- 操作按钮区域 -->
          <div class="table-operator" style="border-top: 5px">
            <a-button type="primary" icon="download" @click="handleExportXls()">导出</a-button>
          </div>
          <!-- table区域-begin -->
          <div>
            <a-table
              ref="table"
              bordered
              :scroll="{x: 1500}"
              size="middle"
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              @change="handleTableChange"
            >
            </a-table>
          </div>
        </a-card>
      </a-tab-pane>
      <a-tab-pane key="2" tab="调薪记录">
        <a-card :bordered="false">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <a-form-item label="调整项目ID">
<!--                    <j-dict-select-tag placeholder="请选择调整项目ID" v-model="queryParam.fieldId" dictCode="salary_fields,field_name,id"/>-->
                    <a-select v-model="queryParam.fieldId" placeholder="请选择调整项目">
                      <a-select-option v-for="d in formOptions" :key="d.value" >{{d.text}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->
<!--          &lt;!&ndash; 查询区域 &ndash;&gt;-->
<!--          <div class="table-page-search-wrapper">-->
<!--            <a-form layout="inline" @keyup.enter.native="searchQuery">-->
<!--              <a-row :gutter="24">-->
<!--                <a-col :md="6" :sm="8">-->
<!--                  <a-form-item label="薪资项目">-->
<!--                    <a-input placeholder="请输入薪资项目" v-model="queryParam.fieldId_dictText"></a-input>-->
<!--                  </a-form-item>-->
<!--                </a-col>-->
<!--                <a-col :md="6" :sm="8">-->
<!--                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">-->
<!--                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
<!--                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
<!--                    &lt;!&ndash; <a @click="handleToggleSearch" style="margin-left: 8px">-->
<!--                {{ toggleSearchStatus ? '收起' : '展开' }}-->
<!--                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
<!--              </a> &ndash;&gt;-->
<!--                  </span>-->
<!--                </a-col>-->

<!--              </a-row>-->
<!--            </a-form>-->
<!--          </div>-->
          <!-- 操作按钮区域 -->
          <!-- <div class="table-operator" style="border-top: 5px">
            <a-button type="primary" icon="download" @click="handleExport()">导出</a-button>
          </div> -->
          <!-- table区域-begin -->
          <div>
            <a-table
              ref="table"
              bordered
              :scroll="{x: 1500}"
              size="middle"
              rowKey="id"
              :columns="columns2"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              @change="handleTableChange"
            >
            </a-table>
          </div>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <router-view/>
  </div>
</template>

<script>
 import { getAction } from '@/api/manage'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { dicCode } from '@/api/salaryAdjust'
  export default {
    components: {},
    mixins: [JeecgListMixin],
    data () {
      return {
        formOptions: [],
        description: '我的薪资',
        tabActive: '1',
        queryParam: {},
        recycleBinVisible: false,
        columns: [],
        columns2: [{
            title: '被调整人',
            align: 'center',
            dataIndex: 'userId_dictText'
          },
          {
            title: '调薪项目',
            align: 'center',
            dataIndex: 'fieldId_dictText'
          },
          {
            title: '调整前薪资',
            align: 'center',
            dataIndex: 'fieldDefaultOld'
          },
          {
            title: '调薪幅度',
            align: 'center',
            dataIndex: 'adjustValue'
          },
          {
            title: '调薪方式',
            align: 'center',
            dataIndex: 'adjustType_dictText'
          },
          {
            title: '调整后薪资',
            align: 'center',
            dataIndex: 'fieldDefaultNew'
          },
          {
            title: '调薪原因',
            align: 'center',
            dataIndex: 'adjustReason',
            scopedSlots: { customRender: 'htmlSlot' }
          }],
        url: {
          list: '/salary/salaryStatist/mySalaryList',
          exportXlsUrl: 'salary/salaryStatist/myExport'
        }
      }
    },
    created() {
      this.getCode();
      this.fetchHeadColumns()
    },
    mounted () {

    },
    methods: {
      getCode(){
        dicCode().then((res) =>{
          if (res.success) {
            this.formOptions = res.result
          }
        })
      },
      callback(key) {
      this.tabActive = key
      if (this.tabActive === '1') {
        this.url.list = '/salary/salaryStatist/mySalaryList'
      } else {
        this.url.list = '/salary/salaryAdjust/myList'
      }
      this.loadData()
      // this.$router.push({ path: '/salary/provide' })
      },
      fetchHeadColumns() {
        getAction('/salary/salaryStatist/getHead').then((res) => {
          const columns = res.result.cloumns.map((item) => {
            if (item.children) {
              item.children = item.children.map((childItem) => {
                return { ...childItem, title: childItem.fieldName, dataIndex: childItem.fieldCode, align: 'center' }
              })
            }
            return { ...item, title: item.fieldName, dataIndex: item.fieldCode, align: 'center' }
          })
          this.columns = columns
        })
      }
      // handleExport() {
      //   window.location.href = `${window._CONFIG['domianURL']}/salary/salaryStatist/myExport`
      // }
    }

  }
</script>

<style lang="less" scoped>
  .title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
</style>
